<template>
  <div>
    <el-button class="w-100" :size="size" plain @click="toSelect">
      {{ value == null || value.macCode === "" ? buttonName : value.macCode }}
      <i class="el-icon-edit"></i>
    </el-button>
    <el-dialog
      :title="buttonName"
      append-to-body
      :visible.sync="showFlag"
      width="1000px"
    >
      <div class="flex-center m-b-10">
        <div class="flex-start">
          <el-input
            size="small"
            class="m-r-10"
            placeholder="请输入加注站名称或编号"
            style="width: 300px"
            v-model="search.queryStr"
            @change="query"
          />
        </div>
      </div>
      <el-table
        class="my-table"
        :data="data"
        v-loading="loading"
        style="width: 100%"
        border
        height="350"
        :header-cell-style="{ background: '#eee', color: '#000' }"
      >
        <el-table-column label="" width="40">
          <template v-slot="scope">
            <el-radio
              :label="scope.row.id"
              v-model="valueSelectId"
              class="m-l-5"
              >{{ "" }}</el-radio
            >
          </template>
        </el-table-column>
        <el-table-column type="index" align="center" label="序号" width="60" />
        <el-table-column label="加注机编号" width="180">
          <template v-slot="scope">{{
            scope.row.macCode | defaultValue
          }}</template>
        </el-table-column>
        <el-table-column label="加注站名称">
          <template v-slot="scope">{{
            scope.row.siteName | defaultValue
          }}</template>
        </el-table-column>
        <el-table-column prop="ureaPrice" label="销售单价(元)" width="180" />
      </el-table>
      <app-pagination
        ref="paginationRef"
        :total="total"
        :page-size="page.size"
        class="m-t-20"
        @change="pageChange"
      />
      <div class="dividing-line m-t-20 m-b-20"></div>
      <div class="flex-end">
        <el-button type="primary" plain size="small" @click="showFlag = false"
          >取消</el-button
        >
        <el-button type="primary" size="small" @click="confirmAdd"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AppPagination from "@/components/business/app-pagination";
import {
  equals,
  getRecords,
  getTotal,
  isNotNull,
  isNull,
  isTrue,
  msgError,
} from "@/util/common-util";
import { getPage } from "@/api/business/filling-machine";
import AppDictSelect from "@/components/business/app-dict-select";
import AppAddress from "@/components/business/app-address";

export default {
  name: "select-filling-machine-single-button",
  components: { AppAddress, AppDictSelect, AppPagination },
  props: {
    buttonName: {
      type: String,
      default: "请点击选择加注机",
    },
    initValue: {
      type: Object,
      default: null,
    },
    isCluster: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: "small",
    },
    onlyNotTeamSeal: {
      type: Boolean,
      default: null,
    },
  },
  data() {
    return {
      showFlag: false,
      data: [],
      loading: false,
      search: {
        districtCode: null,
        cityCode: null,
        provinceCode: null,
        queryStr: "",
        // onlyNotTeamSeal: this.onlyNotTeamSeal
      },
      page: {
        size: 10,
        current: 1,
      },
      total: 0,
      value: null,
      valueSelectId: null,
    };
  },
  created() {
    if (isNotNull(this.initValue)) {
      this.value = this.initValue;
    }
  },
  methods: {
    pageChange(_page) {
      this.page = _page;
      this.query();
    },
    addressChange(region) {
      this.search.provinceCode = region.province;
      this.search.cityCode = region.city;
      this.search.districtCode = region.area;
      this.query();
    },
    query() {
      this.loading = true;
      if (isTrue(this.isCluster)) {
        this.search.isClusterSelectFillMachine = true;
      }
      getPage(this.page, this.search)
        .then((res) => {
          this.data = getRecords(res);
          if (isNotNull(this.value)) {
            for (const item of this.data) {
              if (item.id == this.value.id) {
                this.valueSelectId = item.id;
                break;
              }
            }
          }
          this.total = getTotal(res);
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    toSelect() {
      this.showFlag = true;
      this.query();
    },
    confirmAdd() {
      if (isNull(this.valueSelectId)) return msgError("请选择一个");
      let flag = true;
      for (const item of this.data) {
        if (equals(item.id, this.valueSelectId)) {
          this.value = {
            id: item.id,
            macCode: item.macCode,
          };
          this.$emit("change", this.value);
          flag = false;
          this.showFlag = false;
          break;
        }
      }
      if (flag) msgError("请选择一个");
    },
  },
};
</script>

<style lang="scss" scoped>
.my-table {
  ::v-deep .el-button--small {
    padding: 0 5px !important;
    font-size: 14px !important;
  }

  ::v-deep td {
    padding: 8px 0 !important;
  }
}
</style>
